{% extends 'base.html' %}

{% block body%} 
<div class="row">
    <div class="col-md-4">
          <table class="table table-hover table-condensed">

                {% for mod_pin_1_item in mod_pin_1_items %}
                  <tr>
                      <td width="75%" style="font-size: 12px">
                        {{ mod_pin_1_item[0] }}
                      </td>
                      <td>
                          <span id="mod_pin_1_{{ mod_pin_1_item[0] }}">
                          </span>
                          <input  name = "cb_mod_pin_1" onclick="cb_mod_pin_1_evt('{{  mod_pin_1_item[0] }}')" class="my_checkbox" id="cb_mod_pin_1_{{  mod_pin_1_item[0] }}" type="checkbox">
                      </td>
                  </tr>
                {% endfor %}
              <tr>
                  <td colspan="2">
                      <button class="btn btn-success" id="btn_get_mod_pin_1">
                      Get
                      &nbsp;&nbsp;
                      <i id="btn_get_mod_pin_1_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                  </button>
          
                  </td>
              </tr>
          </table>
    </div>
    <div class="col-md-4">
        <table class="table table-hover table-condensed">

                {% for mod_pin_2_item in mod_pin_2_items %}
                  <tr>
                      <td  width="75%" style="font-size: 12px">
                        {{ mod_pin_2_item[0] }}
                      </td>
                      <td>
                          <span id="mod_pin_2_{{ mod_pin_2_item[0] }}">
                          </span>
                          <input  name = "cb_mod_pin_2" onclick="cb_mod_pin_2_evt('{{ mod_pin_2_item[0] }}')" class="my_checkbox" id="cb_mod_pin_2_{{ mod_pin_2_item[0] }}" type="checkbox">
                      </td>
                  </tr>
                  {% endfor %}
              <tr>
                  <td colspan="2">
                      <button class="btn btn-success" id="btn_get_mod_pin_2">
                      Get
                      &nbsp;&nbsp;
                      <i id="btn_get_mod_pin_2_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                      </button>
                  </td>
              </tr>
          </table>
    </div>


  <div class="col-md-4">

        <table class="table table-hover table-condensed">

                {% for mod_pin_3_item in mod_pin_3_items %}
                  <tr>
                      <td  width="75%" style="font-size: 12px">
                        {{ mod_pin_3_item[0] }}
                      </td>
                      <td>
                          <span id="mod_pin_3_{{ mod_pin_3_item[0] }}">
                          </span>
                          <input  name = "cb_mod_pin_3" onclick="cb_mod_pin_3_evt('{{ mod_pin_3_item[0] }}')" class="my_checkbox" id="cb_mod_pin_3_{{ mod_pin_3_item[0] }}" type="checkbox">
                      </td>
                  </tr>
                  {% endfor %}
              <tr>
                  <td colspan="2">
                      <button class="btn btn-success" id="btn_get_mod_pin_3">
                      Get
                      &nbsp;&nbsp;
                      <i id="btn_get_mod_pin_3_loading" class="fa fa-refresh fa-spin fa-fw"></i>
                      </button>
                  </td>
              </tr>
          </table>

  </div>

  </div>
{% endblock %}

{% block js%} 
{{ super() }}
<script type="text/javascript">

    function cb_mod_pin_1_evt(idx)
    {
        if ($("#cb_mod_pin_1_"+ idx).is(':checked')) 
            val = 1;
        else
            val = 0;
        // alert(idx + ": " +val);
        $.post("api/set_mod_pin_1",
        {
            idx:idx,
            val:val
        },
        function(data,status){
            console.log("data: " + data);
            $("#mod_pin_1_" + idx).html(val);
        });
    }

    function cb_mod_pin_2_evt(idx)
    {
        if ($("#cb_mod_pin_2_"+ idx).is(':checked')) 
            val = 1;
        else
            val = 0;
        // alert(idx + ": " +val);
        $.post("api/set_mod_pin_2",
        {
            idx:idx,
            val:val
        },
        function(data,status){
            console.log("data: " + data);
            $("#mod_pin_2_" + idx).html(val);
        });
    }

    function cb_mod_pin_3_evt(idx)
    {
        if ($("#cb_mod_pin_3_"+ idx).is(':checked')) 
            val = 1;
        else
            val = 0;
        // alert(idx + ": " +val);
        $.post("api/set_mod_pin_3",
        {
            idx:idx,
            val:val
        },
        function(data,status){
            console.log("data: " + data);
            $("#mod_pin_3_" + idx).html(val);
        });
    }

    $(document).ready(function(){

        $("#btn_get_mod_pin_1_loading").hide();
        $("#btn_get_mod_pin_2_loading").hide();
        $("#btn_get_mod_pin_3_loading").hide();
        // get_gpio_mod_pin_1();
        // get_gpio_mod_pin_2();

        function get_mod_pin_1()
        {
            url = "/api/get_mod_pin_1"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    $("#mod_pin_1_" + index).html(value);
                    if(value == 1)
                        $("#cb_mod_pin_1_" + index).prop("checked", true);
                    else
                        $("#cb_mod_pin_1_" + index).prop("checked", false);						
                });
                $("#btn_get_mod_pin_1_loading").hide();
            });
        }
        
        function get_mod_pin_2()
        {
            url = "/api/get_mod_pin_2"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    $("#mod_pin_2_" + index).html(value);
                    if(value == 1)
                        $("#cb_mod_pin_2_" + index).prop("checked", true);
                    else
                        $("#cb_mod_pin_2_" + index).prop("checked", false);						
                });
                $("#btn_get_mod_pin_2_loading").hide();
            });
        }

        function get_mod_pin_3()
        {
            url = "/api/get_mod_pin_3"
            $.get(url, function(data, status){
                console.log(data);
                d = JSON.parse(data);
                $.each(d,function(index,value){
                    $("#mod_pin_3_" + index).html(value);
                    if(value == 1)
                        $("#cb_mod_pin_3_" + index).prop("checked", true);
                    else
                        $("#cb_mod_pin_3_" + index).prop("checked", false);           
                });
                $("#btn_get_mod_pin_3_loading").hide();
            });
        }        

        $("#btn_get_mod_pin_1").click(function () {
            $("#btn_get_mod_pin_1_loading").show();
            get_mod_pin_1();
        });

        $("#btn_get_mod_pin_2").click(function () {
          $("#btn_get_mod_pin_2_loading").show();
            get_mod_pin_2();
        });

        $("#btn_get_mod_pin_3").click(function () {
          $("#btn_get_mod_pin_3_loading").show();
            get_mod_pin_3();
        });

    });

</script>
{% endblock %}